<template>
    <div id="side">
       <v-row>
          <v-col cols="12">
          <v-tooltip right open-delay="500" open-on-hover >
      <template v-slot:activator="{ on, attrs }">
            <v-btn block plain color="white darken-4" tile
              :class="btnClass('main')" @click="goto('main')"
              v-bind="attrs" v-on="on" >
              <i class="fa fa-delicious fa-2x" aria-hidden="true"></i>
            </v-btn>
          </template>
          <span>概览</span>
          </v-tooltip>


          <v-tooltip right open-delay="500" open-on-hover >
      <template v-slot:activator="{ on, attrs }">
            <v-btn block plain color="white darken-4" tile
             :class="btnClass('master')" @click="goto('master')"
              v-bind="attrs" v-on="on" >
                <i class="fa fa-grav fa-2x" aria-hidden="true"></i>
            </v-btn>
          </template>
          <span>管家</span>
          </v-tooltip>

          <v-tooltip right open-delay="500" open-on-hover >
      <template v-slot:activator="{ on, attrs }">
            <v-btn block plain color="white darken-4" tile
             :class="btnClass('note')" @click="goto('note')" 
              v-bind="attrs" v-on="on" >
                <i class="fa fa-pencil fa-2x" aria-hidden="true"></i>
            </v-btn>
          </template>
          <span>笔记</span>
          </v-tooltip>


          <v-tooltip right open-delay="500" open-on-hover >
      <template v-slot:activator="{ on, attrs }">
            <v-btn block plain color="white darken-4" tile
             :class="btnClass('xbig')" @click="goto('xbig')"
              v-bind="attrs" v-on="on" >
                <i class="fa fa-slideshare fa-2x" aria-hidden="true"></i>
            </v-btn>
          </template>
          <span>辅助</span>
          </v-tooltip>

          </v-col>


          <assist></assist>
       </v-row>
      </div>
</template>

<script>
import Assist from "./component/Assist"
export default {
  data() {
    return {
      modu: "main"
    }
  },
  components:{Assist},
    methods:{
      goto(path) {
        switch(path) {
          case 'main':
            this.$router.push('/main')
            break;
          case 'master':
            this.$router.push('/master')
            break;
          case 'note':
            this.$router.push('/note')
            break;
          case 'xbig':
            this.$router.push('/xbig')
            break;
        }
        this.modu = path
      },
      btnClass(name){
        return this.modu == name ? 'btn-selected' : ''
      }
    }
}
</script>

<style scoped>
  #side {
    width:50px;
    flex-shrink: 0;
    background: #008ae1; /* 主色 */
  }
  #side>.row{
    height:100vh;
  }

  .v-btn:not(.v-btn--round).v-size--x-large,
  .v-btn:not(.v-btn--round).v-size--default{
    padding:28px 0;
  }

  /deep/ .btn-selected.v-btn>.v-btn__content {
    opacity:1 !important;
  }
  .btn-selected {
    border-left:2px solid #fff;
  }

</style>
